<template>
  <el-dialog :title="formData.id ? '编辑房产' : '添加房产'" :visible="dialogShow" @close="cancelBtn">
    <el-form ref="propertyForm" :model="formData" :rules="rules" label-width="auto">
      <el-form-item label="经纪人" prop="agent">
        <el-select v-model="formData.agent.id" placeholder="请选择经纪人" style="width: 90%">
          <el-option v-for="item in agentList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="分类" prop="category">
        <el-select v-model="formData.category.id" placeholder="请选择分类" style="width: 90%">
          <el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title">
        <el-input v-model="formData.title" style="width: 90%" />
      </el-form-item>

      <el-form-item label="标签" prop="tags">
        <template>
          <el-tag v-for="tag in formData.tags" :key="tag" closable :disable-transitions="false" @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
          <el-input v-if="inputVisible" ref="saveTagInput" v-model="inputValue" class="input-new-tag" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" />
          <el-button v-else class="button-new-tag" size="small" @click="showInput">新建标签+</el-button>
        </template>
      </el-form-item>

      <el-form-item label="地址" prop="address" class="address">
        <div style="width: 20%">
          <!-- options选项 -->
          <!-- provinceAndCityData 是省市两级联动数据且不带 "全部" 字样选项 -->
          <!-- provinceAndCityDataPlus 是省市两级联动数据且显示 "全部" 字样选项 -->
          <!-- regionData 是省市区三级联动数据且不带 "全部" 字样选项 -->
          <!-- regionDataPlus 是省市区三级联动数据且显示 "全部" 字样选项 -->
          <!-- 当选择 “全部” 字样选项时，绑定的 value 值是空字符串。 -->
          <el-cascader v-model="provinces" size="large" :options="options" placeholder="请选择省市区" @change="addressChange" />
        </div>
        <el-input v-model="formData.address" placeholder="请输入地址" class="input-with-select" style="width: 70%" />
      </el-form-item>

      <el-form-item label="价格" prop="price">
        <el-input v-model="formData.price" style="width: 90%" />
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input v-model="formData.desc" style="width: 90%" type="textarea" :autosize="{ minRows: 3, maxRows: 4 }" />
      </el-form-item>

      <el-form-item label="内容" prop="content">
        <template>
          <VueEditor v-model="formData.content" />
        </template>
      </el-form-item>

      <el-form-item label="介绍图片" prop="photos">
        <UploadImg2 ref="uploadImg2" :limit-img="4" />
      </el-form-item>

      <el-form-item label="封面" prop="image">
        <UploadImg ref="uploadImg" />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelBtn">取 消</el-button>
      <el-button type="primary" @click="confirmBtn">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { VueEditor } from 'vue2-editor'// 富文本编辑器

import { regionData, CodeToText } from 'element-china-area-data'// 引入
import UploadImg from '@/views/agents/components/uptupian.vue'
// import UploadImg2 from '@/components/ImageUpload/index.vue'
import UploadImg2 from '@/components/ImageUpload/index copy.vue'
import { getPropertyById, editProperty, addProperty } from '@/api/property'
export default {
  components: { UploadImg, UploadImg2, VueEditor },
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    agentList: {
      type: Array,
      default: function() {
        return []
      }
    },
    categoryList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      options: regionData, // 选择格式
      provinces: [], // 省市区绑定数组
      inputVisible: false,
      inputValue: '', // 双向绑定新建标签
      formData: {
        agent: {
          id: ''
        },
        category: {
          id: ''
        },
        title: '',
        desc: '',
        image: '',
        price: '',
        address: '',
        content: '',
        photos: [],
        tags: []
      },
      rules: {
        agent: [{ required: true, message: '经纪人不能为空', trigger: 'blur' }],
        category: [{ required: true, message: '分类不能为空', trigger: 'blur' }],
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
          { min: 2, max: 14, message: '标题长度为2-14位' }
        ],
        desc: [
          { required: true, message: '描述不能为空', trigger: 'blur' },
          { min: 4, max: 200, message: '描述长度为4-200个字符' }
        ]
      }
    }
  },
  methods: {
    // 选择省份触发事件
    addressChange(arr) {
    //   console.log(arr)
      this.formData.address = CodeToText[arr[0]] + CodeToText[arr[1]] + CodeToText[arr[2]]
    },
    // 根据id获取房产 回填表单
    async getPropertyById(id) {
      this.formData = await getPropertyById(id)
      // 客户头像回显
      this.$refs.uploadImg.fileList.push({ url: this.formData.image })
      // 介绍图片回显
      this.formData.photos.forEach((item) => {
        this.$refs.uploadImg2.fileList.push({ url: item })
      })
    },
    // 根据this.formData判断是否有id 判断是编辑  还是  添加
    async confirmBtn() {
      if (this.$refs.uploadImg.fileList[0] && !this.$refs.uploadImg.fileList[0].url) {
        return this.$message.error('图片尚未上传完成，请稍后！')
      }
      // 封面图片
      this.formData.image = this.$refs.uploadImg.fileList[0] && this.$refs.uploadImg.fileList[0].url
      // 介绍图片
      this.formData.photos = []
      this.$refs.uploadImg2.fileList.forEach(item => {
        this.formData.photos.push(item.url)
      })
      try {
        await this.$refs.propertyForm.validate()
        if (this.formData.id) {
          await editProperty(this.formData)
          this.$message.success('编辑房产成功！')
        } else {
          await addProperty(this.formData)
          this.$message.success('添加房产成功！')
        }
        this.$parent.getPropertyList()
        this.cancelBtn()
      } catch (error) {
        console.log(error)
      }
    },
    // 取消按钮
    cancelBtn() {
      this.$refs.propertyForm.resetFields()
      this.formData = {
        agent: {
          id: ''
        },
        category: {
          id: ''
        },
        title: '',
        desc: '',
        image: '',
        price: '',
        address: '',
        content: '',
        photos: [],
        tags: []
      }
      this.provinces = []// 重置省市县联动
      this.$refs.uploadImg.fileList = []// 重置上传封面图片组件里面的图片数组
      this.$refs.uploadImg2.fileList = []// 重置上传介绍图片组件里面的图片数组
      this.$emit('update:dialogShow', false)
    },
    // 关闭标签
    handleClose(tag) {
      this.formData.tags.splice(this.formData.tags.indexOf(tag), 1)
    },
    // 点击+ 新建标签
    showInput() {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 确认添加标签
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        if (!(this.formData.tags instanceof Array)) {
          this.formData.tags = []
        }
        this.formData.tags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .address {
 .el-form-item__content {
    display:flex;
 }
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>

